/**
 * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
 * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://opensource.org/licenses/MIT
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */

@import '../../../css/variable.css';
@import '../../../css/mixins/clearfix.css';

.biz-tab-wrapper {
    padding: 30px 20px;
}

.bk-tab2 .bk-tab2-head .bk-tab2-nav>li {
    border-right: 1px solid #ddd;
    min-width: 130px;
    text-align: center;
}

.bk-button-group {
    @mixin clearfix;

    .item {
        position: relative;
        display: inline-block;
        float: left;

        &:hover {
            z-index: 10;

            >.bk-icon {
                display: inline-block;
            }
        }

        &:first-child {
            .bk-button {
                border-radius: 2px 0 0 2px;
            }
        }

        >.bk-button {
            border-radius: 0;

            &.is-selected {
                background-color: #c3cdd7 !important;
                border-color: #c3cdd7 !important;
            }
        }

        >.bk-icon {
            cursor: pointer;
            background: #fff;
            position: absolute;
            border-radius: 50%;
            right: -5px;
            top: -5px;
            display: none;
            font-size: 16px;
            z-index: 1;
            color: $primaryColor;

            &:hover {
                color: $primaryColor;
            }
        }
    }
}

.biz-keys-list {
    .biz-key-item {
        margin-bottom: 10px;
    }

    .bk-form-input {
        width: 240px;
    }

    .bk-dropdown-box {
        margin-right: 0;
    }

    .operator {
        height: 36px;
        line-height: 36px;
        text-align: center;
        display: inline-block;
        font-size: 18px;
        padding: 0 10px;
    }

    .text {
        height: 36px;
        line-height: 36px;
        text-align: center;
        display: inline-block;
        font-size: 14px;
        padding: 0 10px;
    }
}

.action-btn {
    height: 36px;
    text-align: center;
    display: inline-block;
    border: none;
    background: transparent;
    outline: none;

    .bk-icon {
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 50%;
        vertical-align: middle;
        border: 1px solid #dde4eb;
        color: #737987;
        font-size: 14px;
        display: inline-block;

        &.icon-minus {
            font-size: 15px;
        }
    }
}

.biz-part-header {
    margin-top: 40px;
    text-align: center;
}

.biz-configuration-form {
    width: 100%;
    min-width: 910px;
    max-width: 1280px;
}

.biz-input-wrapper {
    height: 36px;
    line-height: 34px;
    border-radius: 2px;
    text-align: center;

    .bk-form-checkbox {
        padding: 0;
        margin-top: -1px;
    }
}

.bk-number {
    padding-right: 0;
}

.bk-text-button {
    .bk-icon {
        transition: all ease 0.3s;
    }

    &.rotate {
        .bk-icon {
            transform: rotate(180deg);
        }
    }
}

.action-box {
    .action-btn {
        padding: 0;
        margin-right: 6px;

        &:hover {
            color: $primaryColor;

            .bk-icon {
                color: $primaryColor;
                border-color: $primaryColor;
            }
        }
    }
}

.bk-form .bk-form-content .bk-form-tip {
    padding: 0;
    margin: 10px 0 0 0;
    position: relative;
    height: auto;
    line-height: 1;
    left: 0;
}

.from-json-btn {
    position: absolute;
    right: 0;
    top: 48px;
    z-index: 10;
}

.code-fullscreen {
    padding: 7px;
    cursor: pointer;
    position: absolute;
    right: 13px;
    color: #fafbfd;
    z-index: 10;
    font-size: 16px;
}

.save-json-btn {
    position: absolute;
    right: 100px;
    top: -48px;
}

.hide-json-btn {
    position: absolute;
    right: 16px;
    top: -48px;
}

.biz-confignation-wrapper .ace_editor {
    font-size: 13px;
}

.ace-full-screen {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000;
}

.biz-guide-box {
    box-shadow: none;
    padding: 130px 40px;
}

@keyframes flash {
    0% {
        width: 3px;
        height: 3px;
    }

    50% {
        width: 4px;
        height: 4px;
    }

    100% {
        width: 5px;
        height: 5px;
    }
}
